<template>
  <div class="network_field">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="团队部门" name="teamNetworkRef">
        <TeamNetwork ref="teamNetworkRef" />
      </el-tab-pane>
      <el-tab-pane label="个人部门" name="personalNetworkRef">
        <PersonalNetwork ref="personalNetworkRef" />
      </el-tab-pane>
      <el-tab-pane label="工程师认证" name="engineerAutRef">
        <EngineerAuthen ref="engineerAutRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import TeamNetwork from '../TeamNetwork/index.vue'
  import PersonalNetwork from '../PersonalNetwork/index.vue'
  import EngineerAuthen from '../EngineerAuthen/index.vue'
  import { onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { TabsPaneContext } from 'element-plus'

  const route = useRoute()
  const activeName = ref('teamNetworkRef')
  const teamNetworkRef = ref<InstanceType<typeof TeamNetwork> | null>(null)
  const personalNetworkRef = ref<InstanceType<typeof PersonalNetwork> | null>(null)
  const engineerAutRef = ref<InstanceType<typeof EngineerAuthen> | null>(null)

  // 获取客服列表
  const getTeamList = () => {
    teamNetworkRef.value.getList()
  }

  // 选项卡点击事件
  const handleTabClick = (pane: TabsPaneContext) => {
    activeName.value = pane.props.name as string
    getList()
  }

  const getList = () => {
    switch (activeName.value) {
      case 'teamNetworkRef':
        if (teamNetworkRef.value) {
          teamNetworkRef.value.getList()
        }
        break
      case 'personalNetworkRef':
        if (personalNetworkRef.value) {
          personalNetworkRef.value.getList()
        }
        break
      case 'engineerAutRef':
        if (engineerAutRef.value) {
          engineerAutRef.value.getList()
        }
        break
    }
  }

  onMounted(() => {
    getList()
  })

  watch(
    () => route.name,
    (value) => {
      if (value === 'branchset') {
        getList()
      }
    },
  )

  defineExpose({ getTeamList })
</script>

<style scoped lang="scss">
  @import './NetworkField.scss';
</style>
